<template>
  <div class="error-wrap">
    <div class="error-content">
      <el-image src="/404.png" fit="fill" class="error-img" />
      <div class="error-info">
        <h2 class="error-h2">矮油~~您访问的页面不在地球上...</h2>
        <p class="error-p">
          <span class="error-p-text">休息一下,去首页逛逛看吧。</span>
          <router-link to="/" class="back-home">
            <i class="el-icon-third-back-home is-vertical" />
            <span>返回首页</span>
          </router-link>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PageNotFound",
};
</script>

<style lang="stylus" scoped>
.error-content {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.error-img {
  width: 7.68rem;
  height: 4.24rem;
}

.error-h2 {
  color: #8E8F96;
  font-weight: 700;
  padding: 0.2rem 0;
}

.error-p-text {
  color: #8E8F96;
}

.back-home {
  color: #fff;
  padding: 0.1rem 0.2rem;
  border-radius: 0.1rem;
  background-color: var(--colorLevel1);
}

.back-home i[class*="el-icon-third-"] {
  margin-right: 0.05rem;
}
</style>